{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<style>
    .td-do-div{
        display: flex;
        justify-content: space-around;
        align-items:center;
        width: 90px;
        flex-wrap: wrap;
    }
    .td-do-div a{
        margin-top: 3px;
    }
</style>
<!--数据列表页面-->
<section class="content">
    <!--顶部搜索筛选-->
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <form class="form-inline searchForm" id="searchForm" action="{:url('index')}" method="GET">
                        <div class="form-group ">
                            <select name="id" id="id" class="form-control field-select"
                                    data-placeholder="请选择员工" >
                                <option value="">请选择员工</option>
                                {foreach name='staff_list' id='item'}
                                <option {if isset($id) && $id==$item.id}selected{/if} value="{$item.id}">
                                    {$item.name}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="form-group ">
                            <select name="position_id" id="position_id" class="form-control field-select"
                                    data-placeholder="请选择职位" style="width: 120px" >
                                <option value="">请选择职位</option>
                                {foreach name='position_list' id='item'}
                                <option {if isset($position_id) && $position_id==$item.id}selected{/if} value="{$item.id}">
                                    {$item.name}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="form-group ">
                            <select name="department_id" id="department_id" class="form-control field-select"
                                    data-placeholder="请选择部门" style="width: 220px">
                                <option value=""></option>
                                {$department_list|raw}
                            </select>
                        </div>
                        <div class="form-group " >
                                <input id="hired_date" name="hired_date"
                                       value="{if isset($hired_date)}{$hired_date}{else}{/if}" placeholder="请选择入职时间" type="text" class="form-control filed-datetime" autocomplete="off">
                        </div>
                        <script>
                            $('#id').select2();
                            $('#position_id').select2();
                            $('#department_id').select2();
                            laydate.render({
                                elem: '#hired_date',
                                type: 'month',
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#hired_date").val(value);
                                },
                            });
                        </script>
                        <div class="form-group " >
                                <input id="full_salary_date" name="full_salary_date"
                                       value="{if isset($full_salary_date)}{$full_salary_date}{else}{/if}" placeholder="薪资转正时间" type="text" class="form-control filed-datetime" autocomplete="off">
                        </div>
                        <script>
                            laydate.render({
                                elem: '#full_salary_date',
                                type: 'month',
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#full_salary_date").val(value);
                                },
                            });
                        </script>
                        <div class="form-group " >
                                <input id="full_date" name="full_date"
                                       value="{if isset($full_date)}{$full_date}{else}{/if}" placeholder="转正时间" type="text" class="form-control filed-datetime" autocomplete="off">
                        </div>
                        <script>
                            laydate.render({
                                elem: '#full_date',
                                type: 'month',
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#full_date").val(value);
                                },
                            });
                        </script>
                        <div class="form-group ">
                            <input id="birthday_month" name="birthday_month"
                                   value="{if isset($birthday_month)}{$birthday_month}{else}{/if}" placeholder="生日月份" type="text" class="form-control filed-datetime" autocomplete="off" style="width: 100px">
                        </div>
                        <div class="form-group ">
                            <select name="_order" id="_order" class="form-control input-sm index-order">
                                <option value="">排序字段</option>
                                <option value="id" {if isset($_order) && $_order=='id'}selected{/if}>ID
                                </option>
                                <option value="hired_date" {if isset($_order) && $_order=='hired_date'}selected{/if}>入职时间
                                </option>
                                <option value="full_date" {if isset($_order) && $_order=='full_date'}selected{/if}>转正日期
                                </option>
                                <option value="full_salary_date" {if isset($_order) && $_order=='full_salary_date'}selected{/if}>薪资转正日期
                                </option>
                            </select>
                        </div>
                        <div class="form-group ">
                            <select name="_by" id="_by" class="form-control input-sm index-order">
                                <option value="">排序方式</option>
                                <option value="desc" {if isset($_by) && $_by=='desc'}selected{/if}>倒序</option>
                                <option value="asc" {if isset($_by) && $_by=='asc'}selected{/if}>正序</option>
                            </select>
                        </div>
                        <div class="form-group " >
                            <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i>查询
                            </button>
                        </div>
                        <div class="form-group ">
                            <button onclick="exportData()" class="btn btn-sm btn-warning exportData" type="button"><i
                                    class="fa fa-search"></i>导出
                            </button>
                        </div>
                        <div class="form-group ">
                            <button onclick="clearSearchForm()" class="btn btn-sm btn-default" type="button"><i
                                    class="fa  fa-eraser"></i>清空查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">

                <!--数据列表顶部-->
                <div class="box-header">
                    <div>
                        <a title="添加" data-toggle="tooltip" class="btn btn-primary btn-sm " href="{:url('add')}">
                            <i class="fa fa-plus"></i> 添加
                        </a>
                        <a class="btn btn-danger btn-sm AjaxButton" data-toggle="tooltip" title="删除选中数据"
                           data-confirm-title="删除确认" data-confirm-content="您确定要删除选中的数据吗？" data-id="checked"
                           data-url="{:url('del')}">
                            <i class="fa fa-trash"></i> 删除
                        </a>
                        <a class="btn btn-success btn-sm AjaxButton" data-toggle="tooltip" title="启用选中数据"
                           data-confirm-title="启用确认" data-confirm-content="您确定要启用选中的数据吗？" data-id="checked"
                           data-url="{:url('enable')}">
                            <i class="fa fa-circle"></i> 启用
                        </a>

                        <a class="btn btn-warning btn-sm AjaxButton" data-toggle="tooltip" title="禁用选中数据"
                           data-confirm-title="禁用确认" data-confirm-content="您确定要禁用选中的数据吗？" data-id="checked"
                           data-url="{:url('disable')}">
                            <i class="fa fa-circle"></i> 禁用
                        </a>

                        <a class="btn btn-success btn-sm ReloadButton" data-toggle="tooltip" title="刷新">
                            <i class="fa fa-refresh"></i> 刷新
                        </a>
                    </div>
                </div>
                <div class="box-body table-responsive">
                    <table class="table table-hover table-striped table-bordered table-condensed datatable" id="table" data-toggle="table">
                        <thead>
                        <tr>
                            <th >
                                <input id="dataCheckAll" type="checkbox" onclick="checkAll(this)" class="checkbox"
                                       placeholder="全选/取消">
                            </th>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>职位</th>
                            <th>社保关系</th>
                            <th>档案编号</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                            <th>险种</th>
                            <th>身份证号</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>生日</th>
                            <th>生日月份</th>
                            <th>户口类型</th>
                            <th>民族</th>
                            <th>入职日期</th>
                            <th>试用月数</th>
                            <th>试用薪资月数</th>
                            <th>转正薪资日期</th>
                            <th>转正日期</th>
                            <th>合同开始日期</th>
                            <th>合同结束日期</th>
                            <th>合同期限（年）</th>
                            <th>部门领导</th>
                            <th>排序</th>
                            <th>紧急联系人</th>
                            <th>与本人关系</th>
                            <th>联系人电话</th>
                            <th>是否已婚</th>
                            <th>文化程度</th>
                            <th>毕业学校</th>
                            <th>专业</th>
                            <th>户籍所在地</th>
                            <th>现家庭住址</th>
                            <th>开户行</th>
                            <th>工资姓名</th>
                            <th>银行卡号</th>
                            <th>月工作天</th>
                            <th>日工作(时)</th>
                            <th>是否启用</th>
                            <th>更新时间</th>

                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name="data" item="item"}
                        <tr>
                            <td>
                                <input type="checkbox" onclick="checkThis(this)" name="data-checkbox"
                                       data-id="{$item.id}" class="checkbox data-list-check" value="{$item.id}"
                                       placeholder="选择/取消">
                            </td>
                            <td>{$item.id}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.name}</p></td>
                            <td><p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.department.name}</p></td>
                            <td><p style=" white-space: nowrap; text-overflow: ellipsis;">{$item.position.name}</p></td>
                            <td><p style="width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.insure.insure}</p></td>
                            <td>{$item.job_number}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.mobile}</p></td>
                            <td>{$item.email}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.insurance_types}</p></td>
                            <td>{$item.id_card}</td>
                            <td>{if $item.sex=='1'}男{else}女{/if}</td>
                            <td>{$item.age}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.birthday}</p></td>
                            <td>{$item.birthday_month}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.node_type}</p></td>
                            <td>{$item.nation}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.hired_date}</p></td>
                            <td>{$item.trial_month}</td>
                            <td>{$item.trial_salary_month}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.full_salary_date}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.full_date}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.contract_start_date}</p></td>
                            <td><p style="width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.contract_end_date}</p></td>
                            <td>{$item.contract_times}</td>
                            <td>{$item.is_leader_text}</td>
                            <td>{$item.sort_number}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.emergency_contact}</p></td>
                            <td><p style="width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.emergency_contact_relation}</p></td>
                            <td>{$item.emergency_contact_mobile}</td>
                            <td><p style=" white-space: nowrap; text-overflow: ellipsis;">{if $item.marriage=='1'}已婚{else}未婚{/if}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.education_level}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.education_school}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.major}</p></td>
                            <td><p style=" overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.domicile}</p></td>
                            <td><p style=" overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.current_address}</p></td>
                            <td><p style=" overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.bank}</p></td>
                            <td><p style="width: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.card_name}</p></td>
                            <td>{$item.card_num}</td>
                            <td>{$item.days_per_month}</td>
                            <td>{$item.hours_per_day}</td>
                            <td>{$item.status_text}</td>
                            <td><p style="width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{$item.update_time}</p></td>

                            <td class="td-do td-do-div">
                                <a href="{:url('edit',['id'=>$item.id])}"
                                   class="btn btn-primary btn-xs" title="修改" data-toggle="tooltip">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a class="btn btn-danger btn-xs AjaxButton" data-toggle="tooltip" title="删除"
                                   data-id="{$item.id}" data-confirm-title="删除确认"
                                   data-confirm-content='您确定要删除ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                   data-url="{:url('del')}">
                                    <i class="fa fa-trash"></i>
                                </a>
                                {if $item.status==1}
                                <a class="btn btn-warning btn-xs AjaxButton" data-toggle="tooltip" title="禁用"
                                   data-id="{$item.id}" data-confirm-title="禁用确认"
                                   data-confirm-content='您确定要禁用ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                   data-url="{:url('disable')}">
                                    <i class="fa fa-circle"></i>
                                </a>
                                {else/}
                                <a class="btn btn-success btn-xs AjaxButton" data-toggle="tooltip" title="启用"
                                   data-id="{$item.id}" data-confirm-title="启用确认"
                                   data-confirm-content='您确定要启用ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                   data-url="{:url('enable')}">
                                    <i class="fa fa-circle"></i>
                                </a>
                                {/if}

                            </td>
                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>

                <!-- 数据列表底部 -->
                <div class="box-footer">
                    {$page|raw}
                    <label class="control-label pull-right" style="margin-right: 10px; font-weight: 100;">
                        <small>共{$total}条记录</small>&nbsp;
                        <small>每页显示</small>
                        &nbsp;
                        <select class="input-sm" onchange="changePerPage(this)">
                            <option value="10" {if $admin.per_page==10}selected{/if}>10</option>
                            <option value="20" {if $admin.per_page==20}selected{/if}>20</option>
                            <option value="30" {if $admin.per_page==30}selected{/if}>30</option>
                            <option value="50" {if $admin.per_page==50}selected{/if}>50</option>
                            <option value="100" {if $admin.per_page==100}selected{/if}>100</option>
                        </select>
                        &nbsp;
                        <small>条记录</small>
                    </label>
                </div>

            </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        $(window).resize(function() {
            $('#table').bootstrapTable('destroy').bootstrapTable(
                {
                    height:$(window).height()-306,
                });
        });
        $('.table').bootstrapTable('destroy').bootstrapTable(
            {height:$(window).height()-306,
            fixedColumns:true,
            fixedNumber:3,
            onClickRow:function (row,$element) {
                $('.info').removeClass('info');//移除class
                $($element).addClass('info');//添加class
            },
        });
    });

</script>
{/block}

